{% extends "lxoa/layout.html" %}
{% block css %}

{% endblock %}
{% block content %}
<link rel="stylesheet" type="text/css" href="/static/lxoa/css/bootstrap-table.min.css" />
<style>
    .input-group {
        width: 100%;
    }

    .input-group-addon {
        width: 120px;
    }

    .selectpicker {
        width: 100%;
        /*height: 34px;*/
    }
</style>

<div class="panel-body" style="margin-top:8px;">
    <!-- Table -->
    <table id="table"></table>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">添加请假记录</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交成功！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交失败，请稍后重试！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">请假人</span>
                                    <select class="selectpicker" name="vac_person" id="vac_person" data-style="btn-info">
                                        <option value="Mime Li">Mime Li</option>
                                        <option value="David Tang">David Tang</option>
                                        <option value="Daisy Zhu">Daisy Zhu</option>
                                        <option value="Kyle Bie">Kyle Bie</option>
                                        <option value="Cherry Wu">Cherry Wu</option>
                                        <option value="Alison Zhang">Alison Zhang</option>
                                    </select>
                                </div>
                            </div>
                            <!--<div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">confirm person</span>
                                    <select class="selectpicker" name="vac_person2" id="vac_person2" data-style="btn-info">
                                        <option value="Mime Li">Mime Li</option>
                                        <option value="David Tang">David Tang</option>
                                        <option value="Daisy Zhu">Daisy Zhu</option>
                                        <option value="Kyle Bie">Kyle Bie</option>
                                        <option value="Cherry Wu">Cherry Wu</option>
                                        <option value="Alison Zhang">Alison Zhang</option>
                                    </select>
                                </div>
                            </div>-->

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">请假类型</span>
                                    <select class="selectpicker" id="vac_type" name="vac_type" data-style="btn-info">
                                        <option value="年假">年假</option>
                                        <option value="调休假">调休假</option>
                                        <option value="补休假">补休假</option>
                                        <option value="事假">事假</option>
                                        <option value="婚假">婚假</option>
                                        <option value="丧假">丧假</option>
                                        <option value="产假">产假</option>
                                        <option value="陪产假">陪产假</option>
                                        <option value="病假">病假</option>
                                        <!--<option value="探亲假">探亲假</option>-->
                                        <option value="工伤假">工伤假</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">请假时长(天)</span>
                                    <select class="selectpicker" id="vac_interval" name="vac_interval" data-style="btn-info">
                                        <option value="0.5">0.5</option>
                                        <option value="1" selected="selected">1</option>
                                        <option value="1.5">1.5</option>
                                        <option value="2">2</option>
                                        <option value="2.5">2.5</option>
                                        <option value="3">3</option>
                                        <option value="3.5">3.5</option>
                                        <option value="4">4</option>
                                        <option value="4.5">4.5</option>
                                        <option value="5">5</option>
                                        <option value="5.5">5.5</option>
                                        <option value="6">6</option>
                                        <option value="6.5">6.5</option>
                                        <option value="7">7</option>
                                        <option value="7.5">7.5</option>
                                        <option value="8">8</option>
                                        <option value="8.5">8.5</option>
                                        <option value="9">9</option>
                                        <option value="9.5">9.5</option>
                                        <option value="10">10</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">开始时间</span>
                                    <input type="text" id="vac_date" name="vac_date" class="form-control" placeholder="请选择" aria-describedby="basic-addon1">
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">结束时间</span>
                                    <input type="text" id="vac_enddate" class="form-control" name="vac_enddate" placeholder="" readonly="readonly" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">办公地点</span>
                                    <select class="selectpicker" name="vac_office" id="vac_office" data-style="btn-info">
                                        <option value="西安">西安</option>
                                        <option value="上海">上海</option>
                                        <option value="南宁">南宁</option>
                                        <option value="美国贝尔蒙特">美国贝尔蒙特</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!--<div class="row">

                        </div>-->
                        <div class="row">
                            <div class="col-md-12 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">请假原因</span>
                                    <textarea class="form-control" style="resize:none;" name="vac_reason" id="vac_reason" placeholder="请输入请假原因或备注" aria-describedby="basic-addon1"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row" style="margin-top:10px;">
                            <div class="col-md-2 col-md-offset-10 margin-top-8">
                                <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
                            </div>
                        </div>-->
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                    <button type="button" class="btn btn-primary" id="submitbtn"> 提交 </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="myModaltj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width:85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">请假统计</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交成功！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交失败，请稍后重试！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3 margin-top-8 pull-right" style="z-index:100">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">年份</span>
                                    <select class="selectpicker" name="vac_year" id="vac_year" onchange="sumyear(this)" data-style="btn-info">
                                        <option value="">All</option>
                                        <option value="2018">2018年</option>
                                        <option value="2019">2019年</option>
                                        <option value="2020">2020年</option>
                                        <option value="2021">2021年</option>
                                        <option value="2022">2022年</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12 margin-top-8">
                                <div class="" style="height:500px" id="divchart">
                                    Loading...
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>-->
                    <button type="button" class="btn btn-primary" data-dismiss="modal"> 确定 </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/lxoa/js/bootstrap.min.js"></script>
<script src="/static/lxoa/js/bootstrap-table.min.js"></script>
<!--<script src="/static/lxoa/js/bootstrap-table-locale-all.min.js"></script>-->

<script src="/static/lxoa/laydate/laydate.js"></script>
<script src="/static/lxoa/js/tablevacation.js"></script>
<script src="/static/lxoa/js/echarts.min.js"></script>

{% endblock %}
